<template>
  <view class="repair-detail">
    <!-- 状态进度 -->
    <view class="progress-section">
      <view class="progress-item" 
            v-for="(step, index) in progressSteps" 
            :key="index"
            :class="{ active: currentStep >= index }">
        <view class="step-dot"></view>
        <text class="step-text">{{ step }}</text>
        <text class="step-time" v-if="repairDetail.timeline?.[index]">
          {{ repairDetail.timeline[index] }}
        </text>
      </view>
    </view>

    <!-- 报修信息 -->
    <view class="info-section">
      <view class="section-title">报修信息</view>
      <view class="info-item">
        <text class="label">报修类型</text>
        <text>{{ repairDetail.typeLabel }}</text>
      </view>
      <view class="info-item">
        <text class="label">房屋信息</text>
        <text>{{ repairDetail.house }}</text>
      </view>
      <view class="info-item">
        <text class="label">联系电话</text>
        <text>{{ repairDetail.phone }}</text>
      </view>
      <view class="info-item">
        <text class="label">预约时间</text>
        <text>{{ repairDetail.appointmentDate }}</text>
      </view>
      <view class="info-item description">
        <text class="label">问题描述</text>
        <text>{{ repairDetail.description }}</text>
      </view>
      <view class="info-item" v-if="repairDetail.images?.length">
        <text class="label">问题图片</text>
        <view class="image-list">
          <image v-for="(img, index) in repairDetail.images" 
                 :key="index"
                 :src="img"
                 mode="aspectFill"
                 @tap="previewImage(index)">
          </image>
        </view>
      </view>
    </view>

    <!-- 维修反馈 -->
    <view class="feedback-section" v-if="repairDetail.feedback">
      <view class="section-title">维修反馈</view>
      <view class="feedback-content">
        <view class="info-item">
          <text class="label">维修人员</text>
          <text>{{ repairDetail.feedback.worker }}</text>
        </view>
        <view class="info-item">
          <text class="label">维修时间</text>
          <text>{{ repairDetail.feedback.time }}</text>
        </view>
        <view class="info-item description">
          <text class="label">处理说明</text>
          <text>{{ repairDetail.feedback.description }}</text>
        </view>
        <view class="info-item" v-if="repairDetail.feedback.images?.length">
          <text class="label">现场图片</text>
          <view class="image-list">
            <image v-for="(img, index) in repairDetail.feedback.images" 
                   :key="index"
                   :src="img"
                   mode="aspectFill"
                   @tap="previewFeedbackImage(index)">
            </image>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons" v-if="showButtons">
      <button class="cancel-btn" 
              v-if="repairDetail.status === 'pending'"
              @tap="cancelRepair">取消报修</button>
      <button class="evaluate-btn" 
              v-if="repairDetail.status === 'completed' && !repairDetail.evaluated"
              @tap="showEvaluateModal">评价维修</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      repairId: '',
      repairDetail: {},
      progressSteps: ['提交报修', '受理确认', '维修处理', '完成评价'],
      currentStep: 0
    }
  },
  computed: {
    showButtons() {
      return ['pending', 'completed'].includes(this.repairDetail.status) &&
             (!this.repairDetail.evaluated || this.repairDetail.status === 'pending')
    }
  },
  methods: {
    async getRepairDetail() {
      try {
        const res = await this.$api.getRepairDetail(this.repairId)
        this.repairDetail = res.data
        this.updateProgress()
      } catch (error) {
        uni.showToast({
          title: '获取详情失败',
          icon: 'none'
        })
      }
    },
    updateProgress() {
      const statusStepMap = {
        pending: 0,
        processing: 1,
        repairing: 2,
        completed: 3,
        cancelled: 0
      }
      this.currentStep = statusStepMap[this.repairDetail.status] || 0
    },
    previewImage(index) {
      uni.previewImage({
        urls: this.repairDetail.images,
        current: index
      })
    },
    previewFeedbackImage(index) {
      uni.previewImage({
        urls: this.repairDetail.feedback.images,
        current: index
      })
    },
    async cancelRepair() {
      uni.showModal({
        title: '取消报修',
        content: '确定要取消此次报修吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await this.$api.cancelRepair(this.repairId)
              uni.showToast({
                title: '取消成功',
                icon: 'success'
              })
              this.getRepairDetail()
            } catch (error) {
              uni.showToast({
                title: '取消失败',
                icon: 'none'
              })
            }
          }
        }
      })
    },
    showEvaluateModal() {
      uni.navigateTo({
        url: `/pages/property/repair-evaluate?id=${this.repairId}`
      })
    }
  },
  onLoad(options) {
    this.repairId = options.id
    this.getRepairDetail()
  }
}
</script>

<style lang="scss">
.repair-detail {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

.progress-section {
  background: #fff;
  padding: 40rpx 20rpx;
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 20rpx;
  
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 40rpx;
    right: 40rpx;
    height: 2rpx;
    background: #ddd;
    transform: translateY(-50%);
  }
  
  .progress-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    
    .step-dot {
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background: #ddd;
      margin-bottom: 10rpx;
    }
    
    .step-text {
      font-size: 24rpx;
      color: #999;
    }
    
    .step-time {
      font-size: 20rpx;
      color: #999;
      margin-top: 5rpx;
    }
    
    &.active {
      .step-dot {
        background: #007aff;
        box-shadow: 0 0 10rpx rgba(0,122,255,0.3);
      }
      
      .step-text {
        color: #007aff;
      }
    }
  }
}

.info-section, .feedback-section {
  background: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  
  .info-item {
    display: flex;
    margin-bottom: 20rpx;
    
    .label {
      width: 160rpx;
      color: #666;
    }
    
    &.description {
      flex-direction: column;
      
      .label {
        margin-bottom: 10rpx;
      }
    }
  }
  
  .image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    
    image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
    }
  }
}

.bottom-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
  display: flex;
  gap: 20rpx;
  
  button {
    flex: 1;
    
    &.cancel-btn {
      background: #f5f5f5;
      color: #666;
    }
    
    &.evaluate-btn {
      background: #007aff;
      color: #fff;
    }
  }
}
</style> 